<template>
  <div class="whole">
    <header>
      <div class="h-icon"><van-icon name="setting-o" /></div>

      <div class="h-tou">
        <img src="../../../images/u2173.png" width="70px" height="70px" />
        <van-cell class="h-tou-cell" center is-link>
          <div class="xx">
            <div class="xm">
              <p style="font-weight: 600; font-size: 20px">Daisy</p>
              <p style="margin-top: 5px">
                <span
                  style="color: cadetblue; font-size: 12px; margin-right: 10px"  @click="onClickHander"
                  >关注108</span
                ><span style="color: cadetblue; font-size: 12px">粉丝10</span>
              </p>
            </div>
            <div class="self" style="font-size: 14px">个人主页</div>
          </div>
        </van-cell>
      </div>
    </header>

    <div class="content">
      <div class="cot_top" style="font-size: 16px; margin-bottom: 10px">
        即将开始
      </div>
      <div class="h-tou cot-tu">
        <img src="../../../images/封面_u1151.png" width="40px" height="60px" />
        <van-cell class="h-tou-cell cot-tou-cell" center is-link>
          <div class="xx">
            <div class="xm">
              <p style="font-size: 14px; width: 200px">
                舞台剧东野圭吾[虚无的十字架]
              </p>
              <p style="margin-top: 5px">
                <span
                  style="color: cadetblue; font-size: 12px; margin-right: 5px"
                  >2020年09月17日</span
                ><span style="color: cadetblue; font-size: 12px">19:00</span>
              </p>
            </div>
          </div>
        </van-cell>
      </div>
    </div>

    <div class="order" style="margin-top: 10px; border-radius: 5px">
      <van-cell title="我的订单" is-link style="padding-right: 30px" />
    </div>

    <div
      class="often_label"
      style="padding: 20px; border-radius: 5px; margin-bottom: 1px"
    >
      <div class="o_top" style="font-size: 14px">常用工具</div>
    </div>

    <div class="m_icon">
      <div class="i_single">
        <div><van-icon name="star" size="20" /></div>
        <div style="margin-top: 10px">我的收藏</div>
      </div>
      <div class="i_single">
        <div><van-icon name="underway" size="20" /></div>
        <div style="margin-top: 10px">我的评价</div>
      </div>
      <div class="i_single">
        <div><van-icon name="coupon" size="20" /></div>
        <div style="margin-top: 10px">优惠券</div>
      </div>
      <div class="i_single">
        <div><van-icon name="friends" size="20" /></div>
        <div style="margin-top: 10px">观演人</div>
      </div>
      <div class="i_single">
        <div><van-icon name="manager" size="20" /></div>
        <div style="margin-top: 10px">我的群组</div>
      </div>
      <div class="i_single">
        <div><van-icon name="location" size="20" /></div>
        <div style="margin-top: 10px">地址管理</div>
      </div>
      <div class="i_single">
        <div><van-icon name="service" size="20" /></div>
        <div style="margin-top: 10px">咨询客服</div>
      </div>
      <div class="i_single">
        <div><van-icon name="todo-list" size="20" /></div>
        <div style="margin-top: 10px">意见反馈</div>
      </div>
      <div class="i_single">
        <div><van-icon name="question" size="20" /></div>
        <div style="margin-top: 10px">常见问题</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    onClickHander(){
        this.$router.push('/focus')
    }
  }
};
</script>

<style lang="scss" scoped>
@mixin public {
  .h-tou {
    margin-top: 30px;
    display: flex;
    .h-tou-cell {
      background-color: #f4f4f4;
      height: 70px;
      // background-color: blue;
      .xx {
        width: 100%;
        // background-color: yellow;
        display: flex;
        align-items: center;
        .xm {
          display: inline-block;
          margin-right: 60px;
          height: 100%;
          //  background-color: red;
          p {
            margin: 0;
            padding: 0;
          }
        }
        .self {
          width: 60px;
          height: 30px;
          //  background-color: blue;
        }
      }
    }
  }
}

.whole {
  background: #f4f4f4;
  min-height: 100vh;
  padding: 20px;
  .h-icon {
    display: flex;
    flex-direction: row-reverse;
  }
  @include public;
  .content {
    margin-top: 20px;
    background-color: white;
    padding: 15px;

    .cot-tu {
      margin-top: 0;
      .cot-tou-cell {
        background-color: white;
      }
    }
  }

  .often_label {
    background-color: white;
    margin-top: 10px;
  }
  .m_icon {
    height: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    background-color: white;
    padding: 20px;
    box-sizing: border-box;
    font-size: 12px;
    .i_single {
      // background-color: red;
      width: 60px;
      text-align: center;
    }
  }
}
</style> 